<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .progress {
        border: solid;
        padding: 5px;
        margin: 10px;
      }
      .progress .bar {
        height: 10px;
        width: 0%;
        background: greenyellow;
      }
    </style>
  </head>
  <body>
    <h1>HELLO Index</h1>

    <input type="file" id="uploadInput" />
    <button onclick="upload(document.getElementById('uploadInput'))">
      保存
    </button>
    <div class="progress">
      <div class="bar" id="progressBar"></div>
    </div>

    <script>
      const baseURL = "http://127.0.0.1:8090/api/collections";

      function upload(el) {
        /*  */
        const xhr = new XMLHttpRequest();
        xhr.open("POST", `${baseURL}/documents/records`);

        /* response */
        xhr.responseType = "json";
        // 成功响应 200 ok
        xhr.onload = function () {
          console.log("响应成功");
        };
        /* request */
        // 编码
        const fd = new FormData();
        fd.append("docname", "doc2");
        fd.append("file", el.files[0]);
        //上传进度
        xhr.upload.onprogress = function (e) {
          progressBar.style.width = (e.loaded / e.total) * 100 + "%";
        };
        xhr.upload.onloadstart = function () {
          console.log("onloadstart上传开始");
        };
        xhr.upload.onload = function () {
          console.log("onload上传成功");
        };
        xhr.send(fd);
      }
    </script>
  </body>
</html>
